<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="assets/components/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="assets/components/icon-font/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/payment.css">
    <!--[if lt IE 9]>
    <script type="text/javascript" src="assets/js/html5shiv.min.js"></script>
    <![endif]-->
    <title>收银台</title>
</head>
<body>
<!--头部导航-->
<div id="shortcut">
    <div class="container">
        <ul class="fr">
            <li>
                <a href="###" class="link_admin">admin</a>
                <a href="###" class="link_exit">退出</a>
            </li>
            <li class="spacer"></li>
            <li>
                <div class="shortcut_a">
                    <a href="###" target="_blank">我的订单</a>
                </div>
            </li>
            <li class="spacer"></li>
            <li>
                <div class="shortcut_a">
                    <a href="###" target="_blank">支付帮助</a>
                </div>
            </li>
            <li class="spacer"></li>
            <li>
                <div class="shortcut_a">
                    <a href="###" target="_blank">问题反馈</a>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="p_head">
    <div class="container clearfix">
        <img class="logo" src="" alt="">
    </div>
</div>
<div class="main">
    <div class="container">
        <!--订单信息-->
        <div class="order clearfix">
            <div class="o_left">
                <h3 class="o_tit">
                    订单提交成功，请您尽快付款！&nbsp;&nbsp;订单号：47931358313

                </h3>
                <p class="o_tips">
                    请您在
                    <span>24小时</span>
                    内完成支付，否则订单会被自动取消（以订单详情页为准）。
                </p>
            </div>
            <div class="o_right">
                <div class="o_price">
                    <em>应付金额:</em>
                    <strong>$5000.00</strong>
                    <em>元</em>
                </div>
                <div class="o_detial">
                    <a href="###" class="opened hidden">收起详情<i></i></a>
                    <a href="###" class="closed">订单详情 <i></i></a>

                </div>
            </div>
            <div class="clr"></div>
            <div class="o_list">
                <div class="o_list_info">
                    <span class="mr10"></span>
                    <span class="mr10"></span>
                    <span>1383839888</span>
                </div>
                <div class="o_list_info">
                    <span>商品名称：爱丽思IRIS塑料抽屉式收纳箱透明衣服整理箱可叠加收纳柜大号内衣收纳盒三个装</span>
                </div>
            </div>
        </div>
        <div class="payment">
            <!--在线支付-->
            <div class="paybox paybox_selected" id="pay_card">
                <div>
                    <h3>使用银行卡支付</h3>
                </div>
                <div id="select">
                    <i></i>
                    <span class="checkspan">点击选择银行</span>
                    <ul>
                        <li>
                            <span class="bank_logo bank_abc"></span>
                        </li>
                        <li>
                            <span class="bank_logo bank_abc"></span>
                        </li>
                        <li>
                            <span class="bank_logo bank_abc"></span>
                        </li>
                        <li>
                            <span class="bank_logo bank_abc"></span>
                        </li>
                        <li>
                            <span class="bank_logo bank_abc"></span>
                        </li>
                        <li>
                            <span class="bank_logo bank_abc"></span>
                        </li>
                    </ul>

                </div>
                <div class="pay_verify pay_card_verify">
                    <input type="submit" class=" go_pay go_pay_card" value="立即支付">
                </div>
            </div>
            <!--微信支付-->
            <div class="paybox" id="pay_webchat">
                <div>
                    <h3>微信支付</h3>
                </div>
                <div class="p_wrap">
                    <img src="" alt="">
                </div>
                <div class="pay_verify pay_webchat_verify">
                    <input type="button" class=" go_pay" value="已完成支付">
                </div>
            </div>
            <!--支付宝支付-->
            <div class="paybox" id="pay_alipay">
                <div>
                    <h3>支付宝支付</h3>
                </div>
                <div class="p_wrap">
                    <img src="" alt="">
                </div>
                <div class="pay_verify pay_webchat_verify">
                    <input type="button" class=" go_pay" value="已完成支付">
                </div>
            </div>
        </div>


        <div class="payment mt25">
            <div class="payment_change">
                <div class="payment_tit">
                    <span class="o_icon"></span>
                    <span class="o_tips">以下支付方式不支持合并支付</span>
                </div>
                <div class="payment_others clearfix">
                    <ul>
                        <li>
                            <a href="###">微信支付</a>
                        </li>
                        <span>|</span>
                        <li>
                            <a href="###">支付宝支付</a>
                        </li>
                        <span>|</span>
                        <li>
                            <a href="###">XX支付</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="p_footer">
    <div class="container">
        <div class="pf_line">
            <span>Copyright © 2004-2016 XXXXXX 版权所有</span>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="assets/components/jquery-1.9.1.min.js"></script>
<script src="assets/components/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/js/public.js"></script>
<script>
    $(function () {
        $(".checkspan").bind("click", function () {
            var ul = $(this).siblings('ul')
            if (ul.is(":hidden")) {
                ul.slideDown('400', function () {
                    $(this).find("li").bind("click", function () {
                        var selectLi = $(this).html();
                        $("#select .checkspan").html(selectLi);
                        $("#select ul").slideUp(400);
                    })
                    ul.mouseleave(function () {
                        $('#select ul').slideUp(400)
                    });
                });
            } else {
                $(this).siblings('ul').slideUp(400)
            }

        })
        var detail_btn=$(".o_detial").find("a");
        var detail_list=$(".o_list");
        detail_btn.eq(0).click(function(){
            $(this).addClass("hidden");
            detail_btn.eq(1).removeClass("hidden");
            detail_list.css("display","none")
        })
        detail_btn.eq(1).click(function(){
            $(this).addClass("hidden");
            detail_btn.eq(0).removeClass("hidden");
            detail_list.css("display","block")
        })

    })
</script>
</html>